<script setup lang="ts">
import { ref, onMounted } from "vue";
import { cartProdCount } from "@/api/cart";
import Share from "@/pages/furnitureVideo/components/share.vue";
import { statusBarHeightFn } from "@/utils/util";

const emits = defineEmits(["glad", "onShare", "onToCart"]);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  show: {
    type: Array as any,
    default: () => ["glad", "cart", "more"],
  },
  collectFlag: {
    type: Boolean,
    default: false,
  },
  background: {
    type: String,
    default: "#fff",
  },
});
const leftClick = () => {
  uni.navigateBack();
};
const ddmRange = ref<any>(null);
const options = [
  {
    text: "Home",
    jumpType: 1,
    path: "/pages/home/index",
    src: "http://hengda.pro.aisisoft.com.cn/storage/cover_img/25/0e7ba084a3ddc4a697a09cbef4b2e6.png",
  },
  {
    text: "Oders",
    path: "/pages/commodity/my-orders",
    src: "http://hengda.pro.aisisoft.com.cn/storage/cover_img/46/6a35053b6ad490ddf51709c6eab3fd.png",
  },
  {
    text: "Chats",
    jumpType: 1,
    path: "/TUIKit/components/TUIConversation/index",
    src: "http://hengda.pro.aisisoft.com.cn/storage/cover_img/d0/72d7ebebc10d80806e465f78ce4b51.png",
  },
  {
    text: "Share",
    src: "http://hengda.pro.aisisoft.com.cn/storage/cover_img/52/51c2e42b0e92519e3778e78f5f5040.png",
  },
];
const badge = ref<number>(0);
const cartProdCountFn = async () => {
  const { code, msg, data } = await cartProdCount();
  console.log("cartProdCount", code, msg, data);
  if (code == 0) {
    badge.value = data;
  } else {
    uni.$u.toast(msg);
  }
};
onMounted(() => {
  const token = uni.getStorageSync("app_token");
  if (token) {
    cartProdCountFn();
  }
});
defineExpose({
  cartProdCountFn,
});
const jumpPage = (page: string) => {
  // 更多
  if (page == "more") {
    //显示下拉框
    ddmRange.value.show();
  } else {
    uni.reLaunch({
      url: `/pages/${page}`,
    });
  }
};
const shareRef = ref<any>(null);
const click = (val: any) => {
  console.log(val, "122131321");
  if (val.index === 3) {
    emits("onShare", val);
    return;
  }

  if (val.jumpType == 1) {
    uni.reLaunch({
      url: `${val.path}`,
    });
  } else {
    uni.navigateTo({
      url: `${val.path}`,
    });
  }
};
// 跳转购物车
const toCart = () => {
  emits("onToCart");
};
const gladFn = () => {
  emits("glad");
};
</script>

<template>
  <fui-nav-bar
    :style="{ height: Number(statusBarHeightFn()) + 44 + 'px' }"
    :fontWeight="600"
    :title="title"
    @leftClick="leftClick"
    :isFixed="true"
    :background="background"
  >
    <fui-icon name="arrowleft"></fui-icon>
    <template v-slot:right>
      <view
        @click="gladFn"
        class=""
        style="display: flex; align-items: center"
        v-if="show.indexOf('glad') > -1"
      >
        <image
          v-if="collectFlag"
          style="width: 20px"
          mode="widthFix"
          src="../../static/image/glad.png"
        ></image>
        <image
          v-else
          style="width: 20px"
          mode="widthFix"
          src="@/static/image/top-bar-glad.png"
        ></image>
      </view>
      <view
        v-if="show.indexOf('cart') > -1"
        class=""
        style="position: relative; display: flex; align-items: center"
      >
        <image
          @click="toCart"
          style="width: 20px"
          mode="widthFix"
          src="@/static/image/top-bar-car.png"
        ></image>
        <fui-badge
          :value="badge"
          style="transform: scale(0.7)"
          absolute
          top="-10px"
          right="0px"
          background="#EB5757"
        >
        </fui-badge>
      </view>

      <fui-dropdown-menu
        :size="28"
        :maxHeight="900"
        selectedColor="#465CFF"
        :isCheckbox="false"
        :options="options"
        ref="ddmRange"
        :radius="8"
        @click="click"
      >
        <view class="fui-filter__item">
          <image
            v-if="show.indexOf('more') > -1"
            @click="jumpPage('more')"
            style="width: 24px"
            mode="widthFix"
            src="@/static/image/top-bar-gengd.png"
          ></image>
        </view>
      </fui-dropdown-menu>
    </template>
  </fui-nav-bar>
  <Share ref="shareRef"></Share>
</template>

<style lang="scss" scoped>
:deep(.fui-nav__header) {
  .fui-nav__left {
    width: 100px;
  }

  .fui-nav__right {
    width: 100px;
    gap: 10px;

    image {
      margin-right: 10px;
    }

    .fui-dropdown__menu {
      flex: initial;
    }
  }

  overflow: initial;
}

::v-deep .fui-dropdown__menu-list {
  left: -90px !important;
  width: 127px;

  .fui-dropdown__menu-item {
    .fui-ddm__icon-box {
      background: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    image {
      width: 20px !important;
      height: 20px !important;
      margin: 0 !important;
    }
  }
}
</style>
